fetch("http://localhost:3000/toplist/detail",{
    method:"GET",
    mode:"cors"
})
    .then(r=>r.json())
    .then(function (data) {
        console.log(data.list);
        let string='';
        data.list.forEach(function (value,index) {
            if(index<=3){
                string+=
                    ` 
                               <a href="../html/songlist.html?id=${value.id}">
                                    <div class="rankinglist">
                                    <div class="leftbg">
                                        <img class="rankbg" src="${value.coverImgUrl}" alt="">
                                    </div>
                                    <div class="right_song">
                                        <h2 class="song-name">1.${value.tracks[0].first}-${value.tracks[0].second}</h2>
                                        <h2 class="song-name">2.${value.tracks[1].first}-${value.tracks[1].second}</h2>
                                        <h2 class="song-name">3.${value.tracks[2].first}-${value.tracks[2].second}</h2>
                                    </div>
                                   </div> 
                               </a>
                `
            }

        })
        $('.homeranking').innerHTML=string;

    })
function  $(e) {
    return document.querySelector(e)
}